<template>
  <div class="panel-item">
    <div class="panel-title">
      纸张信息（单位为毫米），打印时按此处设置纸张大小进行打印
    </div>
    <div class="panel-content">
      <div class="paper-settings">
        <div class="setting-item">
          <span class="label">纸张宽:</span>
          <el-input-number v-model="width" :min="50" :max="500" size="small"></el-input-number>
          <span class="unit">mm</span>
        </div>
        <div class="setting-item">
          <span class="label">纸张高:</span>
          <el-input-number v-model="height" :min="50" :max="500" size="small"></el-input-number>
          <span class="unit">mm</span>
        </div>
        <!-- 暂时隐藏刻度比例 -->
        <!-- <div class="setting-item">
          <span class="label">刻度比例:</span>
          <el-input-number 
		           disabled
            v-model="pxPerMm" 
            :min="1.89" 
            :max="7.56" 
            :step="0.5"
            :precision="2"
            size="small"></el-input-number>
          <span class="unit">px/mm</span>
        </div> -->
        <div class="setting-item">
          <el-button 
            type="primary" 
            size="small" 
            @click="applySettings"
            style="margin-left: 80px;">
            应用纸张设置
          </el-button>
        </div>
        <div class="setting-item">
          <span class="label">打印机:</span>
          <el-select v-model="printer" size="small" style="width: 230px">
            <el-option label="默认" value="default"></el-option>
          </el-select>
        </div>
        <div class="setting-item">
          <span class="label">打印方向:</span>
          <el-select v-model="direction" size="small" style="width: 230px">
            <el-option label="打印机默认设置" value="打印机默认设置"></el-option>
            <el-option label="纵向打印" value="纵向打印"></el-option>
            <el-option label="横向打印" value="横向打印"></el-option>
          </el-select>
        </div>
      </div>
      <div class="border-settings">
        <span class="label">打印边界模式:</span>
        <div class="radio-group">
          <el-radio v-model="borderType" label="实际纸张边缘">
            <span class="radio-text">实际纸张边缘</span>
          </el-radio>
          <el-radio v-model="borderType" label="打印机可打印区域">
            <span class="radio-text">打印机可打印区域</span>
          </el-radio>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  width: {
    type: Number,
    required: true
  },
  height: {
    type: Number,
    required: true
  },
  pxPerMm: {
    type: Number,
    required: true
  },
  direction: {
    type: String,
    default: '打印机默认设置'
  },
  borderType: {
    type: String,
    default: '实际纸张边缘'
  }
});

const emit = defineEmits(['apply-settings']);

// 本地数据，用于用户编辑但未应用
const width = ref(props.width);
const height = ref(props.height);
const pxPerMm = ref(props.pxPerMm);
const direction = ref(props.direction);
const borderType = ref(props.borderType);
const printer = ref('default');

// 监听props更新本地值
watch(() => props.width, (newVal) => {
  width.value = newVal;
});

watch(() => props.height, (newVal) => {
  height.value = newVal;
});

watch(() => props.pxPerMm, (newVal) => {
  pxPerMm.value = newVal;
});

watch(() => props.direction, (newVal) => {
  direction.value = newVal;
});

watch(() => props.borderType, (newVal) => {
  borderType.value = newVal;
});

// 应用设置
const applySettings = () => {
  console.log('应用纸张设置:', {
    width: width.value,
    height: height.value,
    pxPerMm: pxPerMm.value,
    direction: direction.value,
    borderType: borderType.value
  });
  
  emit('apply-settings', {
    paperWidth: width.value,
    paperHeight: height.value,
    pxPerMm: pxPerMm.value,
    printDirection: direction.value,
    printBorderType: borderType.value,
    printer: printer.value
  });
};
</script>

<style lang="scss" scoped>
@use '../styles/property-panel.scss';
</style> 